<link rel="stylesheet" href="ccay/example/demo.css" type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<script type="text/javascript" src="ccay/example/ui/pager/pager.js" charset="utf-8"></script>
<div id="pager">
	<div title="API">
		<div>
			<h2>$.fn.pager(ops)</h2>
			<h3>作用：自定义列表数据模板组件</h3>
			<form id="param" class="init ccay-form">
				<div class="ccay-form-body ccay-form-custom">
					<ul>
						<li class="ccay-form-row"><samp>
								<h3>参数</h3>
							</samp> <span class="ccay-form-input">
								<h3>描述</h3>
						</span>
						</li>
						<li class="ccay-form-row"><samp>ops</samp>
								 <span class='ccay-form-input'>
								 <div class="ccay-form-body">
								   <ul>
								   <li class="ccay-form-row"><samp>具体的参数类型</samp> <span class='ccay-form-input'>说明</span>
										</li>
								   </ul>
								 </div>
								<div class="ccay-form-custom">
									<ul>
										
										<li class="ccay-form-row"><samp>pageInf</samp> <span class='ccay-form-input'>
												<p>{},分页信息配置
										</span></li>
										<li class="ccay-form-row "><samp>pageSizes</samp> <span
											class='ccay-form-input'>
												<p>可选择设定的每页结果数，默认配置在Ccay.UI.Config.pager.pageSizes
										</span></li>
										<li class="ccay-form-row"><samp>mode</samp> <span class='ccay-form-input'>
												<p>pager模式，number模式，simple模式，默认配置在Ccay.UI.Config.pager.mode
										</span></li>
										<li class="ccay-form-row"><samp>modeOp</samp> <span class='ccay-form-input'>
												<p>{},page模式的个性配置项	
										</span></li>
										<li class="ccay-form-row"><samp>text</samp> <span class='ccay-form-input'>
												<p>Pager的显示文本，配置在Ccay.UI.Config.pager.text
										</span></li>
										<li class="ccay-form-row"><samp>isInitChange</samp> <span class='ccay-form-input'>
												<p>是否在初始化的时候出发change事件，改功能初始化做数据绑定的请求
										</span></li>
										<li class="ccay-form-row"><samp>fnPageChanged</samp> <span class='ccay-form-input'>
												<p>分页改变时触发的事件：fnPageChange(pageInf,pager)
										</span></li>
										<li class="ccay-form-row"><samp>showLast</samp> <span class='ccay-form-input'>
												<p>是否显示最后，针对没有固定的记录条数的特殊扩展
										</span></li>
										<li class="ccay-form-row"><samp>noTotalRows</samp> <span class='ccay-form-input'>
												<p>是否不显示总记录数，为true时不取总记录数，翻页一直翻到取不到数据为止。
										</span></li>
										<li class="ccay-form-row"><samp>asynTotalRows</samp> <span class='ccay-form-input'>
												<p>异步取记录总数设置，包括取记录数URL，是否缓冲查询参数的searchCache。例如：
												</p>asynTotalRows : {
							URL: 'services/ccay/demo/student/list/page/filterMode/${pageSize}/${curPage}/1/${filter}',
							searchCache : false
						}		
										</span></li>
									</ul>
								</div>
						</span></li>
					</ul>
				</div>
			</form>
		</div>
		<h3 style="padding-top:20px;color:red;"></h3>
	</div>
	<div title="Paper">
	<h4><span>实例1：</span></h4>
	<div style='padding-left:30px'>
		<div id='pagerDemo'></div>
		<div class="clear"></div>
		<h3>html源码:</h3>		
				<div class="codeArea">
					<pre id='testPagerDemohtml'>&lt;div id='testPagerDemo'>&lt;/div></pre>
				</div>
				<h3>js 源码:</h3>
				<div class="codeArea">
					<pre id='testPagerDemojs'>
$(function(){
	$('#testPagerDemo').pager({
	//设置模式
	mode:pager,
	
	//分页信息的配置
	pageInf:{totalRows:2000},
    
	//分页改变时触发的事件
	fnPageChanged:function(pageInf){
	}});
})          </pre>
				</div>
				<div class='try'>
					<a onclick="Ccay.example.openTry('#pager',$('#testPagerDemojs').html(),$('#testPagerDemohtml').html())">亲自试一试</a>
				</div>
			</div>
	</div>
	<div title="numberPaper">
		<h4><span>实例2：</span></h4>
		<div style='padding-left:30px'>
		    <div id='pagerNumber'></div>
			<div class="clear"></div>
		<h3>html源码:</h3>		
		<div class="codeArea">
			<pre id='testPagerNumbertml'>&lt;div id='testPagerNumber'>&lt;/div></pre>
		</div>
		<h3>js 源码:</h3>
		<div class="codeArea">
			<pre id='testPagerNumberjs'>
$('#testPagerNumber').pager({
    //分页信息的配置
    pageInf:{totalRows:55,pageSize:10},
    //模式的选择
    mode:'number'
});
		</pre>
		</div>
		<div class='try'>
			<a onclick="Ccay.example.openTry('#pager',$('#testPagerNumberjs').html(),$('#testPagerNumbertml').html())">亲自试一试</a>
		</div>
		</div>
	<h4><span>实例3：每页结果数无下拉框选择</span></h4>
		<div style='padding-left:30px'>
		    <div id='pagerNumber2'></div>
			<div class="clear"></div>
		<h3>html源码:</h3>		
		<div class="codeArea">
			<pre id='testPagerNumbertml2'>&lt;div id='testPagerNumber2'>&lt;/div></pre>
		</div>
		<h3>js 源码:</h3>
		<div class="codeArea">
			<pre id='testPagerNumberjs2'>
$('#testPagerNumber2').pager({
    //分页信息的配置
    pageInf:{totalRows:55,pageSize:10},
    //如果设定的每页结果数为一个选项时，则不提供下拉框选择
    pageSizes:[10],
    //模式的选择
    mode:'number'
});
		</pre>
		</div>
		<div class='try'>
			<a onclick="Ccay.example.openTry('#pager',$('#testPagerNumberjs2').html(),$('#testPagerNumbertml2').html())">亲自试一试</a>
		</div>
		</div>	
		</div>
	<div title="绑定table数据的翻页">
	<h4><span>实例4：</span></h4>
		<div id='listDemo'>
			<table class='ccay-table'>
				<tr>
					<th style="width:10%">No.</th>
					<th style="width:30%">姓名</th>
					<th style="width:30%">性别</th>
					<th style="width:30%">年龄</th>
				</tr>
				<tbody id ='tbTmpl'>
				</tbody>
			</table>
			<div id='listPager'></div>
		</div>
		<h3>html源码:</h3>		
		<div class="codeArea">
			<pre id='html3'>
&lt;div id='listDemo'>
    &lt;!-- table表头 -->
	&lt;table class='ccay-table'>
		&lt;tr>
			&lt;th style="width:10%">No.&lt;/th>
			&lt;th style="width:30%">姓名&lt;/th>
			&lt;th style="width:30%">性别&lt;/th>
			&lt;th style="width:30%">年龄&lt;/th>
		&lt;/tr>
		&lt;!-- table -->
		&lt;tbody id ='tbBodyTmpl'>&lt;/tbody>
	&lt;/table>
	&lt;!-- 分页控件 -->
	&lt;div id='tableListPager'>&lt;/div>
&lt;/div>		
			</pre>
		</div>
		<h3>js 源码:</h3>
		<div class="codeArea">
			<pre id='js3'>
// 初始化分页控件			
$('#tableListPager').pager({
	isInitChange:true,
	fnPageChanged:function(pageInf){
		bindListEven(pageInf);
	}
});

// 初始化table，及绑定分页事件
function bindListEven(pageInf){
	$('#tbBodyTmpl').ccayTemplate({
		tmpl:"&lt;tr>&lt;td align='center'>${index}&lt;/td>&lt;td>${name}&lt;/td>&lt;td>${sex}&lt;/td>&lt;td align='center'>${age}&lt;/td>&lt;/tr>",
		startIndex:(pageInf.curPage -1) * pageInf.pageSize + 1,
		ajax:{
			url:"services/ccay/demo/student/list/page/{0}/{1}".format(pageInf.pageSize,pageInf.curPage),
			success:function(data){
				$('#tableListPager').pager({pageInf:data.pageVO});
			}
		}
	});
}
			</pre>
		</div>	
		<div class='try'>
				<a onclick="Ccay.example.openTry('#pager',$('#js3').html(),$('#html3').html())">亲自试一试</a>
		</div>
	</div>
	<div title="试一试" tabid="trytab" >
		    <fieldset class='ccay-demo'>
		    <legend ><h2>代码区</h2></legend>
			   
			   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.runDemo()" /> 
	
					<div>
					    <table  style="width:100%;">
					      <tr>
					        <td style="width:100%;">
							<h3>js Code:</h3>	
							  <!-- 高度按需来调整。默认最小应为100px -->					
		                      <textarea id="jsTxt" style="height:200px;width:99%;"></textarea>
		                    </td>   
		                  </tr>
		                  <tr>
		                    <td style="width:100%;">
							<h3>html Code:</h3>
							  <!-- 高度按需来调整。默认最小应为100px -->
		                      <textarea id="htmlTxt" style="height:200px;width:99%;"></textarea>
		                    </td>
		                  </tr> 
	                    </table>
					</div>
	           </fieldset>
	        <fieldset class='ccay-demo'>
	          <legend ><h2>结果区</h2></legend>
				<div>
					<div style="overflow:auto;" id="demoMainPanel"></div>
				</div>
	        </fieldset>
	     </div>
	<div title="FAQ">
  <form class="init ccay-form">
	<div class="ccay-form-body ccay-form-custom">
	    <ul>                     
	        <li class="ccay-form-row">
	            <samp><h3>问题</h3></samp>
	           <span class="ccay-form-input">
	               <h3>解决方案</h3>
	           </span>
	        </li>
	        <!-- 若问题和内容较多，可在li中的class加上ccay-form-whole -->
	        <li class="ccay-form-row">
	                          <samp class="i18n" i18nKey=""></samp>                          
	                         <span class="ccay-form-input"></span>
	        </li>  
	    </ul>
	</div>
  </form>                    
</div>

</div>